<template>
    <div class="onlineRefund">
        <order-single-goods :good="goods" :type="1" :remarkShow="true"/>
        <div class="price">
            <p>退款金额：</p>
            <p class="refund-price">
                <span>￥</span>
                <input type="number" v-model="changePrice" :readonly="parseInt(this.goods.num)<=1"/>
            </p>
        </div>
        <selectReason @reason="getReason" :reason="reason"/>
        <div class="info">
            <!--<span class="remark-title">退款说明：</span>-->
            <textarea placeholder="退款说明:（50字以内）" type="text" maxlength="50" v-model="explain"/>
        </div>
        <div class="voucher" v-if="['1','2'].includes(refundType)">
            <p>上传凭证</p>
            <img-uploader :max-pic-num="6" toast-tip="不可超过六张" :imageList="imageList" @getPics="getImgList"
                          @beforeLoad="showLoading"
                          @afterLoad="dismissLoading"/>
        </div>
        <contact-service></contact-service>
        <div class="btn">
            <P>线上商城商品 退款不退邮费</P>
            <!-- <P>申请成功后可到我的-售后订单中查看及撤销</P> -->
        </div>
        <div class="confirm-btn" v-if="imageList.length >= 3">
            <div class="sure-btn" @click="commit">提交</div>
        </div>
        <div class="btn-db" v-else>
            <button-normal
                    widthPro="200"
                    heightPro="35"
                    :textBtn="textBtn"
                    color="#fff"
                    size="14"
                    @click.native="commit"
            />
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import API from '../../../request/api';
    import OrderSingleGoods from "../../../components/common/order-single-goods";
    import selectReason from "../../../components/User/selectReason";
    import ImgUploader from '../../../components/User/imgUpLoader';
    import {commonMixin} from '@/common/mixin';
    import buttonNormal from '../../../components/common/buttonNormal';
    import ContactService from "../../../components/User/contact-service";

    export default {
        name: 'online-refund',
        components: {
            ContactService,
            OrderSingleGoods,
            selectReason,
            ImgUploader,
            buttonNormal
        },
        mixins: [commonMixin],
        data() {
            return {
                goods: {},
                goodPrice: '', //退款金额,不超过总价
                changePrice: '', // 修改后金额
                reason: '', //退款原因
                explain: '', // 退款说明
                imageList: [], // 上传的凭证
                refundType: '', //退款类型 0->仅退款，1->退货退款
                type: '0',// 线上订单0，线下订单1
                refundId: '',// 退款id
                goodsId: {
                    oid: '',//订单id
                    gid: '', //商品id
                    buyid: '',//渠道id
                },
                textBtn: '提交'
            };
        },
        computed: {},
        created() {
            let refundId = this.$route.query.refundId;
            let refundType = this.$route.query.refundType;
            if (refundId) {
                // 判断是否有refundId，修改售后信息
                let data = {
                    after_id: refundId
                };
                this.request.get(API.afternews, data).then(res => {
                    // 获取售后订单详情并赋值
                    let refundInfo = res[0];
                    this.goodsId.oid = refundInfo.oid;
                    this.goodsId.gid = refundInfo.gid;
                    this.goodsId.buyid = refundInfo.buyid;
                    this.getGoodsInfo(this.goodsId);
                    this.reason = refundInfo.reason;
                    this.explain = refundInfo.explain;
                    this.refundType = refundInfo.status;
                    if (!refundInfo.evidence) {
                        return;
                    }
                    this.imageList = refundInfo.evidence;
                }, () => {
                });
            } else if (refundType.toString()) {
                // 创建售后，若没有获取商品相关id及退款类型
                this.refundType = refundType.toString();
                this.goodsId = this.$route.query;
                this.getGoodsInfo(this.goodsId);
            }
        },
        mounted() {
            // 获取商品信息
        },
        methods: {
            getGoodsInfo(goodsId) {
                this.request.get(API.goodinfo, goodsId).then(res => {
                    this.goods = res[0];
                    let num = parseInt(this.goods.num);
                    let price = parseFloat(this.goods.price);
                    this.goodPrice = (price * 100 * num / 100).toFixed(2).toString();
                    this.changePrice = (price * 100 * num / 100).toFixed(2).toString();
                }, () => {
                });

            },
            getImgList(imgList) {
                // 上传的凭证图片
                this.imageList = imgList;
            },
            showLoading() {
                this.showGlobaLoading();
            },
            dismissLoading() {
                this.hideGlobaLoading();
            },
            getReason(val) {
                this.reason = val;
            },
            createAfter() {
                let data = {
                    oid: this.goodsId.oid,
                    gid: this.goodsId.gid,
                    buyid: this.goodsId.buyid,
                    sale: '',
                    reason: this.reason,
                    explain: this.explain,
                    money: this.changePrice,
                    evidence: this.imageList,
                    status: this.refundType,
                    type: this.type
                };
                this.request.post(API.createafter, data).then(res => {
                    // 发起退款成功
                    this.hideGlobaLoading();
                    // console.log(33333);
                    this.$router.replace({
                        name: 'refund-state',
                        query: {
                            refundId: res.ID
                        }
                    });
                }).catch((err) => {
                    console.error('createafter-err', err);
                    this.$router.go(-1);
                    this.hideGlobaLoading();
                });
            },
            editAfter() {
                let data = {
                    after_id: this.$route.query.refundId,
                    reason: this.reason,
                    explain: this.explain,
                    money: this.changePrice,
                    evidence: this.imageList,
                };
                this.request.post(API.editafter, data).then(res => {
                    // 发起退款成功
                    this.hideGlobaLoading();
                    this.$router.replace({
                        name: 'refund-state',
                        query: {
                            refundId: this.$route.query.refundId
                        }
                    });
                }).catch((err) => {
                    console.error('editafter-err', err);
                    this.$router.go(-1);
                    this.hideGlobaLoading();
                });
            },
            commit() {
                let change = parseFloat(this.changePrice),
                    Original = parseFloat(this.goodPrice);
                if (change > Original) {
                    this.$toast('修改金额不得超过商品总金额');
                } else if (this.changePrice === '') {
                    this.$toast('退款金额不能为空');
                } else if (change <= 0) {
                    this.$toast('退款金额需大于0');
                } else if (this.reason === '') {
                    this.$toast('退款原因未选择');
                } else {
                    // 如果有图片上传图片至oss
                    this.showGlobaLoading();
                    let refundId = this.$route.query.refundId;
                    let refundType = this.$route.query.refundType;
                    console.log('refundId', refundId, refundType);
                    if (refundType) {
                        console.log('createAfter');
                        this.createAfter();
                    } else if (refundId) {
                        console.log('editAfter');
                        this.editAfter();
                    }

                }

            }
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import '~assets/main.styl';
    .icon {
        width: 4vw
        height: 4vw
        fill: gray9
    }

    .onlineRefund {
        overflow-x hidden
        .order-goods {
            background grayF;
        }
        .price {
            flex-x(flex-start);
            height vw(40)
            line-height vw(40)
            padding 0 4vw
            background grayF;
            input {
                color: main-color
                text-align left
                width: 20vw
            }
            span {
                color: main-color
            }
            .refund-price {
            }
        }
        .season {
            margin-top smallMargin
            flex-x();
            height vw(40)
            line-height vw(40)
            padding 0 4vw
            background grayF;
        }
        .info {
            margin-top smallMargin
            flex-x();
            height vw(60)
            padding 0 4vw
            background grayF;
            textarea {
                width: 100%;
                height: vw(45);
                line-height 1.5
            }
        }
        .voucher {
            margin-top smallMargin
            padding 4vw 4vw
            background grayF;
        }
        .btn {
            text-align center
            p {
                word-vw(vw(12), gray9)
                margin-top vw(10)
            }
        }
        .confirm-btn{
            width 100%
            height vw(55)
            background grayF
            position relative
            bottom 0
            display flex
            justify-content center
            align-items center
            margin-top vw(20)
            .commit {
                big-solid();
                margin-top vw(20)
            }
        }
        .btn-db {
            position absolute
            background white
            width 100vw
            bottom 0
            margin-top vw(50)
        }
        @media (max-height: 400px) {
            .btn-db {
                display: none;
            }
        }
        .sure-btn {
            big-solid()
            height vw(35)
            display flex
            justify-content center
            align-items center
        }

    }
</style>
